<template>
  <div class="home">
    <Header></Header>
    <Swiper v-bind:imgLists="imgList"></Swiper>
    <Entrance :Entrance="Entrance"></Entrance>
    <Rank :rankUrl="rankUrl"></Rank>
    <Like :LImgUrl="LImgUrl"></Like>
    <Week :WImgUrl="WImgUrl"></Week>
  </div>
</template>

<script>
  import Header from "./pages/Header"
  import Swiper from "./pages/Swiper"
  import Entrance from "./pages/Entrance"
  import Rank from "./pages/Rank"
  import Like from "./pages/Like"
  import Week from "./pages/Week"

  import {
    mapState
  } from "vuex"
  export default {
    name: "home",
    components: {
      Header,
      Swiper,
      Entrance,
      Rank,
      Like,
      Week
    },
    data() {
      return {
        imgList: [],
        Entrance: [],
        rankUrl: [],
        LImgUrl: [],
        WImgUrl: [],
        changedCity:""
      }
    },
    methods: {
      getHttp() {
        // http://localhost:8080/static/mock/=======>/api
        this.$http.get("/api/data/dataHome.json").then((res) => {
          // console.log(res.data.data[0])
          // console.log(this.city)
          let homeData = res.data.data;
          // console.log(res.data.data)
          homeData.forEach((items, index) => {
            // console.log(items.city,index)
            if (this.city == items.city) {

              this.imgList = items.imgList;
              this.Entrance = items.Entrance;
              this.rankUrl = items.rankUrl;
              this.LImgUrl = items.LimgUrl;
              this.WImgUrl = items.WimgUrl;

            }
          })
        })
      }
    },
    mounted() {
       this.changedCity=this.city
       this.getHttp()
    },
    computed: {
      ...mapState(["city"])
    },
    activated(){


          if (this.changedCity!=this.city) {
            this.getHttp();
            this.changedCity=this.city
          }
          // console.log(this.changedCity,this.city);
    }


  }
</script>

<style>

</style>
